<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/iscroll.js"></script>
</head>
<body>
<div id="wrapper">
  <ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
    <li>66666</li>
    <li>77777</li>
    <li>88888</li>
    <li>99999</li>
    <li>88888</li>
    <li>77777</li>
    <li>66666</li>
    <li>55555</li>
    <li>44444</li>
    <li>33333</li>
    <li>22222</li>
  </ul>
</div>


<div id="wrapper2">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="active">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li class="c"></li>
  </ul>
</div>

</body>
</html>
<style>

  *{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #wrapper{ height: 300px;}
  #wrapper>ul{}
  #wrapper>ul>li{ height: 50px; line-height: 50px}
  #wrapper>ul>li:nth-of-type(even){ background: #eafcfa  }


  #wrapper2{ width: 200px; height: 50px; border: 1px solid #c25858; margin: 10px;}
  #wrapper2>ul{ width: 800px;}
  #wrapper2>ul>li{ height: 50px; line-height: 50px; width: 50px; float: left;}
  #wrapper2>ul>li:nth-of-type(even){ background: #eafcfa  }

  .c{ clear: both}
</style>
<script>
  var myscroll1;
  var myscroll2;
  function loaded(){
    myscroll1=new iScroll("wrapper",{
      // 水平滚动
      hScrollbar:false,
      // 垂直滚动
      vScrollbar:false,
      onScrollElseLimit:function () {

      },
      onScrollLimit:function () {

      }
    });
    myscroll2=new iScroll("wrapper2",{
      // 水平滚动
      hScrollbar:true,
      // 垂直滚动
      vScrollbar:false,
      onScrollLimit:function () {

      },
      onScrollElseLimit:function () {

      },
    });

    myscroll2.scrollToElement('.active',true,true);
  }
  window.addEventListener("DOMContentLoaded",loaded,false);


  /**
   * 基本参数
   * 参数名 说明 可选值 默认值
   * hScroll * 是否允许水平滚动 false，true true
   * vScroll * 是否允许垂直滚动 false ， true true
   * bounce * 是否超过实际位置反弹 false ， true true
   * bounceLock 当内容少于滚动是否可以反弹 false ， true false
   * momentum * 是否开启拖动惯性 false ， true true
   * lockDirection 当水平或垂直拖动时是否锁定另一边的拖动 false ， true true
   * useTransform 是否使用CSS变形 false ，true true
   * useTransition 是否使用CSS变换 false ， true false
   * checkDOMChanges 是否自动检测内容变化 false ， true false
   * topOffset 已经滚动的基准值(一般用在拖动刷新) 数字值 0
   * x 滚动水平初始位置（负值） 数字值 0
   * y 滚动垂直初始位置（负值） 数字值 0
   * Scrollbar 的相关参数
   * 参数名 说明 可选值 默认值
   * hScrollbar * 是否显示水平滚动条 false ， true true
   * vScrollbar * 是否显示垂直滚动条 false ， true true
   * fixedScrollbar 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出scroller的可见区域。 false 否 true 是 默认在Android上为true， iOS上为false
   * hideScrollbar 是否隐藏滚动条 false 否 true 是 默认在Android上为false， iOS上为true
   * fadeScrollbar 滚动条是否渐隐渐显 false 否 true 是 默认在Android上为false， iOS上为true
   * scrollbarClass * 字定义滚动条的样式名 自定义class ”
   * Zoom 放大相关的参数
   * 参数名 说明 可选值 默认值
   * zoom 是否放大 false ， true false
   * zoomMin 放大的最小倍数 数字值 1
   * zoomMax 放大的最大倍数 数字值 4
   * doubleTapZoom 双击放大倍数 数字值 2
   * wheelAction 鼠标滚动行为（还可以是zoom） none 不支持 ‘scroll’ 鼠标滚动 ‘zoom’ 鼠标缩放 ‘scroll’
   * snap 捕捉元素相关的参数
   * 参数名 说明 可选值 默认值
   * snap 是否开启捕捉元素， snap值可以为true 或是 DOM元素的tagname，当为true 时，捕捉的元素会根据可滚动的位置和滚动区域计算得到可滑动几页。如果为tagname,则滑动会对齐到捕捉的元素上。 false 否 true 是< DOM元素的tagname false
   * snapThreshold 滑动的长度限制，只有大于这个距离才会触发捕捉元素事件 数字值 1
   * 自定义 Events 的相关参数
   * 参数名 说明 可选值 默认值
   * onBeforeScrollStart 开始滚动前的事件回调
   * 默认是阻止浏览器默认行为 null 不设置
   * Function 自定义函数 function (e) { e.preventDefault(); }
   * onRefresh refresh 的回调 null
   * onScrollStart 开始滚动的回调
   * onBeforeScrollMove 在内容移动前的回调
   * onScrollMove 内容移动的回调
   * onBeforeScrollEnd 在滚动结束前的回调
   * onScrollEnd 在滚动完成后的回调
   * onTouchEnd 手离开屏幕后的回调
   * onDestroy 销毁实例的回调
   * onZoomStart 放大开始时的回调
   * onZoom 放大的回调
   * onZoomEnd 放大结束后的回调
   * iScroll 方法API
   * destroy
   * 销毁你实例化的iScroll 实例，包括之前绑定的所有iscroll 事件。
   * refresh
   * 这个方法非常有用，当你的滚动区域的内容发生改变 或是 滚动区域不正确，都用通过调用refresh 来使得iscroll 重新计算滚动的区域，包括滚动条，来使得iscroll 适合当前的dom。
   * scrollTo
   * 这个方法接受4个参数 x, y, time, relative x 为移动的x轴坐标，y为移动的y轴坐标, time为移动时间，relative表示是否相对当前位置。
   * scrollToElement
   * 这个方法实际上是对scrollTo的进一步封装，接受两个参数(el,time)，el为需要滚动到的元素引用，time为滚动时间。
   * scrollToPage
   * 此方法接受三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时，iscroll 会自动分页，然后就能使用scrollToPage方法滚动到页面。当然，当hscroll 为false 的时候，不能左右滚动。pageX这个参数就失去效果
   * disable
   * 调用这个方法会立即停止动画滚动，并且把滚动位置还原成0，取消绑定touchmove, touchend、touchcancel事件。
   * enable
   * 调用这个方法，使得iscroll恢复默认正常状态
   * stop
   * 立即停止动画
   * zoom
   * 改变内容的大小倍数,此方法接受4个参数，x,y,scale,time 分别表示的意思为，放大的基准坐标，以及放大倍数，动画时间
   * isReady
   * 当iscroll 没有处于正在滚动，没有移动过，没有改变大小时，此值为true
   * 拉动刷新
   * 说明
   * 自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行，你可以点击这里（需要翻墙）看看视频先一睹为快，也可以点击这里试试拉动刷新是如何工作的。
   * 实现原理
   * 1. 通过 topOffset 参数属性设置iScroll已经滚动的基准值；
   * 2. 通过 onScrollMove 参数方法判断当前滚动是到顶端还是底端；
   * 3. 通过 onScrollEnd 参数方法触发加载新数据，再通过 refresh 方法重新渲染界面；
   * 4. 通过 onRefresh 参数方法调整刷新后的界面结构；
   * ————————————————
   * 版权声明：本文为CSDN博主「XXmaoxiaoXX」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
   * 原文链接：https://blog.csdn.net/kiwangruikyo/article/details/79646085
   */
</script>
